//申请售后
import { View, Text, Image } from '@tarojs/components'
import { AtIcon, AtTabs, AtTabsPane, AtCard,AtButton,AtTextarea,AtImagePicker,AtInput  } from 'taro-ui'
import Taro from '@tarojs/taro'
import './applySale.less'
// import HTTP from '../../service/api'
import { useState, useEffect } from 'react'
const Applysale = () => {
    const [state,setstate]=useState(false)
    const [state1,setstate1]=useState(true)
    const tui=()=>{
        setstate(!state)
        setstate1(!state1)
    }
    const huan=()=>{
        setstate1(!state1)
        setstate(!state)
    }
    const [wenti,setwenti]=useState('')
    const handle=(value)=>{
        setwenti(wenti)
    }
//图片列表
    const [file,setfiles]=useState([{}])
    //选择图片
    const caozuo=(va)=>{
        setfiles(va)
    }
    const chufa=(index,file)=>{
        console.log(index,file);
    }
//手机号码
    const [phoneNum,setphoneNum]=useState('')
    const setPhone=(e)=>{
        setphoneNum(e);
    }
    return (
        <View>
            <View style={{ fontSize: '25px',fontWeight:'bold', margin: '5% 0% 2% 2%' }}>申请售后</View>
            <View className='infoBox'>
                <View className='allorder'>
                    <View className='orderlist'>
                        <Image src='' style={{ width: '50px', height: '50px', background: 'red', margin: '0 5px' }}></Image>
                        <View>
                            <View>商品名称</View>
                            <View>sku数量</View>
                            <View>实付99.99元</View>
                        </View>
                    </View>
                    <View className='moneySuccess'>
                        <View>2019.6.15</View>
                        <View style={{ margin: '15px 0' }}>退款成功</View>
                    </View>
                </View>
            </View>
            <View style={{ fontSize: '16px',fontWeight:'bold', margin: '5% 0% 2% 2%' }}>选择类型</View>
            <View className='btnsty'>
               <View style={state?{width:'150px',height:'50px',background:'rgb(242,242,242)',lineHeight:'50px',textAlign:'center',fontSize:'16px'}:{width:'150px',height:'50px',background:'rgb(153,153,153)',lineHeight:'50px',textAlign:'center',fontSize:'16px'}} onClick={tui}>退货退款</View>
               <View style={state1?{width:'150px',height:'50px',background:'rgb(242,242,242)',lineHeight:'50px',textAlign:'center',fontSize:'16px'}:{width:'150px',height:'50px',background:'rgb(153,153,153)',lineHeight:'50px',textAlign:'center',fontSize:'16px'}} onClick={huan}>直接换货</View>
            </View>
            <View style={{margin:'10px 10px'}}>
                <AtTextarea
                    value={wenti}
                    onChange={handle}
                    maxLength={200}
                    placeholder='你的问题是...'
                />
                <AtImagePicker
                    files={file}
                    onChange={caozuo}
                    onImageClick={chufa}
                    multiple
            />
            </View>
            <View>
                <AtInput
                    name='value'
                    title='联系方式'
                    type='text'
                    placeholder='请输入你的手机号码'
                    value={phoneNum}
                    onChange={setPhone}
                />
            </View>
            <AtButton type='primary' size='small'>提交申请</AtButton>
        </View>
    )

}
export default Applysale;